<template>
	<view class="month_content">
		<view class="month_list" v-for="(item,index) in monthnum" :key="index" @click="handleChoosemonth(item,index)">
			<view class="month_top" :class="m_Active === item.id ? 'm_active_color' : '' ">{{ item.title }}</view>
			<view class="month_img">
				<image src="../../../static/image/sanjiao.png" class="down_img" v-show="m_Active === item.id"></image>
			</view>
		</view>
		<view class="month_down" @click="handleShowmonthData()">
			<image :src="showMonth ? '../../static/image/down.png' : '../../static/image/up.png'"   class="down_j"></image>
			<view class="month_list" v-show="showMonth">
				<view class="list_item" v-for="item in monthlist">{{ item }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				showMonth:false,
				m_Active:0,
				monthnum:[
					{
						id:0,
						title:'当月'
					},
					{
						id:1,
						title:'上月'
					},
					{
						id:2,
						title:'8月'
					},
					{
						id:3,
						title:'7月'
					},
					{
						id:4,
						title:'6月'
					},
					{
						id:5,
						title:'5月'
					},
					{
						id:6,
						title:'4月'
					}
				],
				monthlist:[ '5月' , '4月' , '3月' , '2月' , '1月' ]
			}
		},
		methods:{
			handleShowmonthData(){
				this.showMonth =! this.showMonth
			},
			handleChoosemonth(item,index){
				this.m_Active = item.id
			},
		}
	}
</script>

<style lang="scss">
	.month_content{
		width: 340px;
		height: 40px;
		position: absolute;
		left: calc(50% - 170px);
		display: flex;
		.month_list{
			width: 55px;
			height: 40px;
			.month_top{
				width: 100%;
				height: 22px;
				font-size: $font-size-14;
				text-align: center;
				line-height: 22px;
			}
			.m_active_color{
				color: $primary_color;
			}
			.month_img{
				width: 100%;
				height: 18px;
				@include centerAline();
				.down_img{
					width: 18px;
					height: 18px;
				}
			}
		}
		.month_down{
			width: 55px;
			height: 40px;
			display: flex;
			justify-content: center;
			margin-left: 2px;
			position: relative;
			.down_j{
				width: 16px;
				height: 16px;
				margin-top: 2px;
			}
			.month_list{
				width: 140px;
				height: 80px;
				position: absolute;
				background-color: $white_color;
				right: 5px;
				top: 25px;
				box-shadow: 3px 3px 3px #d9d9d9,
					-2px -2px 10px #ffffff;
				border-radius: $radius_eight;
				display: flex;
				flex-wrap: wrap;
				.list_item{
					width: 30px;
					height: 30px;
					border-radius: 50%;
					background-color: $white_color;
					font-size: $font-size-14;
					text-align: center;
					line-height: $line-height-30;
					margin-left: 4px;
					margin-top: 4px;
					margin-bottom: 4px;
					box-shadow: 3px 3px 3px #d9d9d9,
						-2px -2px 10px #ffffff;
				}
			}
		}
	}
</style>